<template>
  <div class="container mt-3">
    <h2>留言管理</h2>
    
    <!-- 搜索框和日期选择器 -->
    <div class="search-box">
      <input type="text" v-model="searchKeyword" placeholder="请输入搜索关键字" class="search-input">
      <button @click="search">搜索</button>
    </div>
    <div class="date-picker">
      <label for="start-date">开始日期:</label>
      <input type="date" v-model="startDate" id="start-date">
      
      <label for="end-date">结束日期:</label>
      <input type="date" v-model="endDate" id="end-date">
      
      <button @click="filterByDate">筛选</button>
    </div>
    
    <!-- 留言列表 -->
    <table class="table table-striped mt-3">
      <thead>
        <tr>
          <th>序号</th>
          <th>留言人</th>
          <th>留言内容</th>
          <th>处理时间</th>
          <th>处理人</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(message, index) in paginatedMessages" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ message.name }}</td>
          <td>{{ message.content }}</td>
          <td>{{ message.date }}</td>
          <td>{{ message.handler }}</td>
          <td>
            <div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn btn-success">去回复</button>
              <button type="button" class="btn btn-warning">一键提醒</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    
    <!-- 分页导航 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === maxPage">下一页</button>
      <input type="number" v-model.number="jumpPage" placeholder="跳转到页码" />
      <button @click="goToPage(jumpPage)">跳转</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        // 示例数据
        { name: '甲', content: '无培训内容...', date: '未处理', handler: '无' },
        { name: '乙', content: '请增加...', date: '2024-10-01 12:02:20', handler: '张三' },
        { name: '丙', content: '内容有误...', date: '2022-07-13 09:11:17', handler: '李四' },
        // 更多留言...
      ],
      searchKeyword: '',
      startDate: '',
      endDate: '',
      currentPage: 1,
      pageSize: 10, // 每页显示留言的数量
      jumpPage: 1, // 跳转页码
    };
  },

  computed: {
    filteredMessages() {
      let filtered = this.messages;
      if (this.searchKeyword) {
        filtered = filtered.filter(message => {
          return message.content.includes(this.searchKeyword) || message.name.includes(this.searchKeyword);
        });
      }
      if (this.startDate && this.endDate) {
        filtered = filtered.filter(message => {
          const messageDate = new Date(message.date);
          return messageDate >= new Date(this.startDate) && messageDate <= new Date(this.endDate);
        });
      }
      return filtered;
    },
    paginatedMessages() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredMessages.slice(start, end);
    },
    maxPage() {
      return Math.ceil(this.filteredMessages.length / this.pageSize);
    }
  },

  methods: {
    search() {
      this.currentPage = 1; // 重置当前页码
    },
    filterByDate() {
      this.currentPage = 1; // 重置当前页码
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.maxPage) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.maxPage) {
        this.currentPage = page;
      }
    }
  },
  created() {
    this.filteredMessages = this.messages; // 初始化时显示所有留言
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: auto;
}

/* 标题样式 */
h2 {
  font-size: 24px;
  color: #333;
}

/* 搜索框和日期选择器的样式 */
.search-box,
.date-picker {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.search-box input[type="text"],
.date-picker input[type="date"] {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 8px;
}

.search-box button,
.date-picker button {
  padding: 6px 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-box button:hover,
.date-picker button:hover {
  opacity: 0.9;
}

/* 表格样式 */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  text-align: left;
  padding: 10px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

.table tbody td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.btn-group .btn {
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 4px;
}

.btn-group .btn:last-child {
  margin-right: 0;
}

/* 分页导航样式 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.pagination button,
.pagination input {
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination input {
  width: 50px;
  text-align: center;
}

.pagination button:hover {
  background-color: #f8f9fa;
}
</style>